<template>
  <div id="chat-input" :class="{active:isActive}">
    <header class="header">
      <Tooltip content="表情">
        <span class="iconfont icon-biaoqing"></span>
      </Tooltip>
      <Tooltip content="聊天记录">
        <span class="iconfont icon-liaotianjilu1"></span>
      </Tooltip>
    </header>
    <div class="text-area-wrapper">
      <textarea class="text-area" v-model="input" @focus="isActive=true" @blur="isActive=false"  @keydown="keydown"></textarea>
    </div>
    <div class="sendMsg" @click="sendMsg">发送</div>
  </div>
</template>

<script>
import ws from '@/websocket/websocket.js'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      isActive: false,
      input: '' // textarea输入的内容
    }
  },
  props: {
    currentSession: Object
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    sendMsg () {
      if (this.input) {
        const body = {
          chatMsgInput: {
            accepterId: this.currentSession.accepter.friendId,
            msg: this.input,
            msgId: null,
            senderId: this.userInfo.id
          },
          extend: null,
          type: 2
        }
        ws.send(JSON.stringify(body))
        const msg = { // 封装消息对象
          isMyself: true,
          msg: this.input,
          msgId: ''
        }
        const currentSession = this.currentSession
        this.$store.dispatch('getCurrentSession', {currentSession, msg})
        this.input = ''
      } else {
        this.$Message.error('输入内容不能为空')
      }
    },
    keydown (e) {
      if (e.keyCode === 13 && e.shiftKey) {
        this.input += '\n'
      } else if (e.keyCode === 13) {
        e.preventDefault()
        this.sendMsg()
      }
    }
  }
}
</script>

<style lang="stylus">
#chat-input
  position absolute
  bottom 0
  left 0
  right 0
  height 180px
  &.active
    background #fff
  .header
    height 50px
    padding-left 40px
    padding-top 15px
    .iconfont
      font-size 22px
      margin-right 20px
  .text-area-wrapper
    height 85px
    padding 0 40px
    .text-area
      width 100%
      height 100%
      resize none
      border none
      outline none
      font-size 15px
      background-color transparent
  .sendMsg
    width 85px
    height 35px
    position absolute
    bottom 10px
    right 40px
    text-align center
    line-height 35px
    font-size 18px
    background-color #e8e7e7
    border 1px solid #cccbcb
    &:hover
      background #1aad19
      color #fff
</style>
